<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-其他方式让数组发生改变</title>
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <div id="demo">
        <h3>数组其他方式发生改变</h3>
        <hr>

        <p>
            数据列表： {{ arr }}
        </p>
        <!-- <button @click="fn('德')">改变数组</button> -->
        <button @click="fn('王子')">改变数组</button>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                arr: ['德玛西亚', '德玛西亚王子', '德邦', '探险家王子']
            },
            methods: {
                fn(val) {
                    // this.arr = ['剑圣']
                    // const arr = this.arr.filter(item => {
                    //     return item.includes(val)
                    // })
                    // // console.log(arr)
                    // this.arr = arr

                    this.arr = this.arr.filter(item => item.includes(val))
                }
            }
        })
    </script>
</body>
</html>